<template>
  <!-- 我是测评记录 -->
  <div class="body">
    <div>
      <Header
        title="测评记录"
        v-model="selectVal"
        :options="options"
        @onChangeSelect="selectChange"
      />
    </div>
    <!-- 管理员 || 校长界面渲染 -->
    <div v-if="userRole == 'admin' || userRole === 'principal'">
      <div class="content" v-for="item in projectList.data" :key="item.id">
        <div class="content-date">{{ currentTime }}</div>
        <div
          class="content-assessment"
          style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
        >
          {{ item.customField }}
        </div>
        <div>
          <el-button type="text" @click="router.push('ReportingResults')"
            >查看评估</el-button
          >
        </div>
      </div>
    </div>
    <!-- 老师界面渲染 -->
    <div v-if="userRole == 'individualTrainer'">
      <div class="content" v-for="item in laosList.data" :key="item.id">
        <div class="content-date">{{ currentTime }}</div>
        <div
          class="content-assessment"
          style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
        >
          {{ item.customField }}
        </div>
        <div>
          <el-button type="text" @click="router.push('ReportingResults')"
            >查看评估</el-button
          >
        </div>
      </div>
    </div>
    <!-- 家长 -->
    <div v-if="userRole == 'parent'">
      <div class="content" v-for="item in jiazList.data" :key="item.id">
        <div class="content-date">{{ currentTime }}</div>
        <div
          class="content-assessment"
          style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
        >
          {{ item.customField }}
        </div>
        <div>
          <el-button type="text" @click="router.push('ReportingResults')"
            >查看评估</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import { useRouter } from "vue-router";
import Header from "@/components/titleHeader/TitleHeader.vue";
// import { id } from "element-plus/es/locale";
import { getProjectListApi } from "@/api/project.js"; // 导入 API 接口
import { getLaosListApi } from "@/api/project.js"; // 导入 API 接口
import { getJiaZListApi } from "@/api/project.js"; // 导入 API 接口

const selectVal = ref("第一期");
const options = [
 { value: '第一期', label: '第一期', disabled: false },  
  { value: '第二期', label: '第二期', disabled: false },  
  { value: '第三期', label: '第三期', disabled: false },
];
const selectChange = (val) => {
    console.log(val);
}

// 声明一个响应式的 projectList 变量
const projectList = ref([]);
const laosList = ref([]);
const jiazList = ref([]);

// 当组件挂载时获取项目列表
const getProjectList = async () => {
  try {
    const res = await getProjectListApi();
    // console.log(res);
    projectList.value = res.data; // 假设 res.data 包含项目列表
    // console.log("projectList:" + projectList.value);
  } catch (error) {
    console.error("获取项目列表时出错:", error);
  }
};
// 使用 onMounted 生命周期钩子来调用获取项目列表的函数
// onMounted(getProjectList);
onMounted(() => {
  getProjectList();
  getLaosList();
  getJiaZList();
  console.log("管理员 || 校长 initialized:", projectList); // 这里打印的值是空的，因为数据尚未加载
  console.log("老师 initialized:", laosList); // 这里打印的值是空的，因为数据尚未加载
  console.log("家长 initialized:", jiazList); // 这里打印的值是空的，因为数据尚未加载
});
// 老师界面渲染
const getLaosList = async () => {
  try {
    const res = await getLaosListApi();
    laosList.value = res.data; // 假设 res.data 包含项目列表
  } catch (error) {
    console.error("获取项目列表时出错:", error);
  }
};
// 家长界面渲染
const getJiaZList = async () => {
  try {
    const res = await getJiaZListApi();
    jiazList.value = res.data; // 假设 res.data 包含项目列表
  } catch (error) {
    console.error("获取项目列表时出错:", error);
  }
};

const router = useRouter();
const userRole = ref(localStorage.getItem("userRole"));
console.log("当前角色为:" + userRole.value);

const currentTime = ref("");
const time = new Date();
const formatDate = (date) => {
  const pad = (num) => String(num).padStart(2, "0"); // 辅助函数，用于补零
  const year = date.getFullYear();
  const month = pad(date.getMonth() + 1); // 月份从0开始，所以加1
  const day = pad(date.getDate());
  const hours = pad(date.getHours());
  const minutes = pad(date.getMinutes());
  const seconds = pad(date.getSeconds());

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};
onMounted(() => {
  currentTime.value = formatDate(time);
  console.log("打开时间:" + currentTime.value);
});
</script>

<style  scoped>
.body {
}
.content {
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  border-bottom: 1px solid #ebeef5;
  margin: 10px 70px;
}
.content:last-child {
  border: none;
}
.content div {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>